<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<!-- 技算属性的返回结果【重组的数组】，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key='index' class="swiper-slide">
				<router-link to="/" v-for="item in list" :key='item.id'>
<<<<<<< HEAD
					<!-- {{item}} -->
=======
>>>>>>> d0d9ac1 (首页)
					<img :src='item.imgURL' />
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起<em>{{item.oldprice}}</em></p>
					</aside>
				</router-link>
			</li>
		</ol>
	</div>
</template>
<script>
		import {onMounted} from 'vue';
		//2.引入Swiper的动态组件
		 import Swiper,{
			 Autoplay,
			 EffectCoverflow,
			 EffectCube,
			 Pagination,
		 } from 'swiper';
		 
		 //3.swier组件应用配置
		 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	
	export default{
		name:'CategoryTab1',
<<<<<<< HEAD
=======
		// props:['propscateone'],
>>>>>>> d0d9ac1 (首页)
		data(){
			return{
				tab1List : [
					{id:1,imgURL:require("../../../assets/tabs/tab1-1.jpg"),title:'广州-丽江 7天跟团游',msg:'含往返飞机票+6晚住宿',price:3493,oldprice:3888},
					{id:2,imgURL:require("../../../assets/tabs/tab1-2.jpg"),title:'广州-稻城亚丁 5天跟团游',msg:'含往返飞机票+4晚住宿',price:5677,oldprice:5888},
					{id:3,imgURL:require("../../../assets/tabs/tab1-3.jpg"),title:'广州-三亚 5天跟团游',msg:'含往返飞机票(含税)+4晚住宿',price:2500,oldprice:2688},
					{id:4,imgURL:require("../../../assets/tabs/tab1-4.jpg"),title:'广州-桂林 9天跟团游',msg:'含单程飞机票单程火车票(含税)+8晚住宿',price:3493,oldprice:3888},
					{id:5,imgURL:require("../../../assets/tabs/tab1-5.jpg"),title:'广州-四川 5天跟团游',msg:'特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅',price:2320,oldprice:2660},
					{id:6,imgURL:require("../../../assets/tabs/tab1-6.jpg"),title:'广州-九寨沟 6天跟团游',msg:'自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江',price:2980,oldprice:3122},
					{id:7,imgURL:require("../../../assets/tabs/tab1-7.jpg"),title:'广州-张家界 4天跟团游',msg:'精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日',price:2255,oldprice:2668},
					{id:8,imgURL:require("../../../assets/tabs/tab1-8.jpg"),title:'广州-银川 5天跟团游',msg:'塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日',price:3380,oldprice:4880},
				]

			}
		},
		computed:{
			//程序将其当成属性而不是函数，是个变量【循环，判断】
			pages(){
				let arr=[]; //空数组，目的是：重组一个二维数组
				let num=4;  //每页条数
				//将原数组遍历
				this.tab1List.forEach((item,index)=>{
					//i:每页页码
					let i=Math.floor(index/num);
					//将计算的页码放入新数组内，作为下标
					//判断该下标是否为存在
					if (!arr[i]) {
						//第一次出现
						arr[i]=[];
						arr[i].push(item);
					}else{
						arr[i].push(item)
					}
				})
				return arr
			}
		},
		setup(){
			onMounted(()=>{
				new Swiper('.cate-tab1',{
					slidesPerView : 1,  
				})
			})
<<<<<<< HEAD
		}
=======
		},
		
>>>>>>> d0d9ac1 (首页)
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.cate-tab1{
		height: 8rem;
	}
	.cate-tab1 ol{
		background-color: white;
		height: 90%;
		width: 100%;
	}
	
	.cate-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
	}
	.cate-tab1 ol li a{
		width: 49%;
		float: left;
		text-align: center;
		margin-top: 0.2rem;
	}
	.cate-tab1 ol li a:nth-child(even){
		float: right;
	}
	.cate-tab1 ol li img{
		width: 80%;
		height: 80%;
		border-radius: 0.3rem;
	}
	.cate-tab1 ol li aside h3{
		padding: 0.1rem 0;
		text-align: left;
		text-indent: 1em;
	}
	.cate-tab1 ol li aside  label{
		display: block;
		color: grey;
		padding-top: 0.05rem;
		text-align: left;
		text-indent: 1em;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.cate-tab1 ol li aside p{
		font-size: 0.35rem;
		text-align: left;
		text-indent: 1em;
		padding-top: 0.1rem;
		color: #ff9c4a;
		font-weight: bold;
	}
	.cate-tab1 ol li aside p em{
		font-size: 0.2rem;
		padding-left: 0.2rem;
		color: gainsboro;
		text-decoration: line-through;
	}
</style>
